<script setup>
import { ref } from 'vue'
import MyTable from './component/MyTable.vue'


const tableData1 = ref([
  { id: 11, name: '狗蛋', age: 18 },
  { id: 22, name: '⼤锤', age: 19 },
  { id: 33, name: '铁棍', age: 17 }
])

const tableData2 = ref([
  { id: 21, name: 'Jack', age: 18 },
  { id: 32, name: 'Rose', age: 19 },
  { id: 43, name: 'Henry', age: 17 }
])

const del = (index) => {
  tableData1.value.splice(index,1)
}
</script>

<template>
  <MyTable #default="{i}" :data="tableData1">
    <button @click="del(i)">删除</button>
  </MyTable>
</template>

<style>
body {
  background-color: #fff;
}
.my-table button {
    width: 65px;
    height: 35px;
    font-size: 18px;
    border: 1px solid #ccc;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
    background-color: #ffffff;
    margin-left: 5px;
  }
</style>
